<template>
	<!-- 搜索框组件 -->
	<view class="container">
		<view class="search-block">
			<view :class='["search-icon-input", isFocus ? "focus-border" :""]'>
				<view class="search-icon">
					<image :src="searchIcon"></image>
					<!-- <image :src="clearIcon"></image> -->
				</view>
				<input type="text" v-model="keywords" placeholder="请输入检索关键字" placeholder-style="color:#999" maxlength="10" class="search-text"
				 @focus="getFocus" @blur="getBlur" confirm-type="search" @confirm="searchMe" />
				<view class="iconfont icon-cancel icon" v-if="keywords" @tap="clearInput"></view>
			</view>
			<view @tap="cancelSearch" v-if="isCancel" class="cancel">取消</view>
		</view>

	</view>
</template>

<script>
	export default {
		props:{
			// 是否展示搜索/取消按钮
			// showText: {
			// 	type: Boolean,
			// 	default: false
			// }
		},
		data(){
			return {
				searchIcon: '../../static/image/monitor/searchIcon.png',
				clearIcon: '../../static/image/monitor/clearIcon.png',
				isFocus: false,
				keywords: "",
				isCancel: false
			}
		},
		methods: {
			// 获取聚焦
			getFocus(){
				this.isFocus = true
			},
			// 失焦
			getBlur() {
				this.isFocus = false
			},
			searchMe() {
				// console.log(val)
				this.$emit('click', this.keywords)
				this.isCancel = true
				this.keywords = ''
			},
			clearInput() {
				this.keywords = ''
				
			},
			cancelSearch() {
				this.keywords = ''
				this.isCancel = false
				this.$emit('cancel', this.keywords)
			}
		}

	}
</script>

<style lang="scss">
	.container {
		.search-block {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			height: 88rpx;
			width: 100%;
			background-color: #fff;
			.search-icon-input {
				display: flex;
				flex-direction: row;
				align-items: center;
				height: 60rpx;
				border: 2rpx solid #e7e7e7;
				border-radius: 30rpx;
				font-size: 28rpx;
				position: relative;

				.search-icon {
					float: left;
					image {
						width: 32rpx;
						height: 32rpx;
						padding-left: 20rpx;
						padding-right: 12rpx;
						vertical-align: middle;
					}
				}

				input {
					float: left;
					width: calc(100% - 68rpx);
					caret-color: #1dd3b8;
					color: #666;
					padding-right: 92rpx;
				}

				.icon {
					// float: left;
					color: #666;
					padding: 24rpx;
					position: absolute;
					right: 0rpx;
					// top: 24rpx;
				}

				&.focus-border {
					border: 2rpx solid #1dd3b8;
				}
			}
			.cancel {
				color: #666;
				font-size: 32rpx;
				margin: 0 24rpx;
			}

			text {
				color: #666;
			}
		}
	}
</style>
